<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Chamb - Responsive E-commerce HTML5 Template</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--enable mobile device-->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--fontawesome css-->
  <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css" />
  <!--bootstrap css-->
  <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css" />
  <!--animate css-->
  <link rel="stylesheet" href="../../assets/css/animate-wow.css" />
  <!--main css-->
  <link rel="stylesheet" href="../../assets/css/style.css" />
  <link rel="stylesheet" href="../../assets/css/bootstrap-select.min.css" />
  <link rel="stylesheet" href="../../assets/css/slick.min.css" />
  <!--responsive css-->
  <link rel="stylesheet" href="../../assets/css/responsive.css" />
</head>

<body>
  <div id="root">
    <header-bar></header-bar>
    <div class="page-content-product">
      <div class="main-product">
        <div class="container">
          <div class="row clearfix">
            <find-box></find-box>
          </div>
          <div class="row clearfix">
            <goods-item v-for="(item,index) in goods" :item="item"></goods-item>
            <div class="categories_link">
              <a href="#">Browse all categories here</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cat-main-box">
      <div class="container">
        <panel-row></panel-row>
      </div>
    </div>
    <div class="products_exciting_box">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-sm-6 wow fadeIn" data-wow-delay="0.2s">
            <exciting-box-f></exciting-box-f>
          </div>
          <div class="col-md-6 col-sm-6 wow fadeIn" data-wow-delay="0.4s">
            <exciting-box-l></exciting-box-l>
          </div>
        </div>
      </div>
    </div>
    <div class="start-free-box">
      <div class="container">
        <div class="row">
          <div class="container">
            <main-start-box></main-start-box>
          </div>
        </div>
        <bg-image-left></bg-image-left>
        <bg-image-right></bg-image-right>
      </div>
    </div>
    <footer-bar></footer-bar>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.min.js"></script>
  <script type="module">
    import HeaderBar from './headerbar.js'
    import FindBox from './findbox.js'
    import GoodsItem from './items.js'
    import PanelRow from './panelrow.js'
    import ExcitingBoxF from './excitingboxf.js'
    import ExcitingBoxL from './excitingboxl.js'
    import MainStartBox from './mainstartbox.js'
    import BgImageRight from './bgimgright.js'
    import BgImageLeft from './bgimgleft.js'
    import FooterBar from './footerbar.js'
    new Vue({
      el: '#root',
      data() {
        return {
          goods: [
            { title: 'Product', img: '../../assets/images/product/1.png', href: '' },
            { title: 'Product', img: '../../assets/images/product/2.png', href: '' },
            { title: 'Product', img: '../../assets/images/product/4.png', href: '' },
            { title: 'Product', img: '../../assets/images/product/5.png', href: '' },
            { title: 'Product', img: '../../assets/images/product/10.png', href: '' },
            { title: 'Product', img: '../../assets/images/product/11.png', href: '' },
            { title: 'Product', img: '../../assets/images/product/12.png', href: '' },
            { title: 'Product', img: '../../assets/images/product/13.png', href: '' }
          ]
        }
      },
      components: {
        HeaderBar,
        FindBox,
        GoodsItem,
        PanelRow,
        ExcitingBoxL,
        ExcitingBoxF,
        MainStartBox,
        BgImageLeft,
        BgImageRight,
        FooterBar
      }
    })
  </script>
</body>

</html>